<!DOCTYPE html>
<html lang="en">
<head>
  <title>Matrix Admin</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
  <link rel="stylesheet" href="css/uniform.css" />
  <link rel="stylesheet" href="css/select2.css" />
  <link rel="stylesheet" href="css/matrix-style.css" />
  <link rel="stylesheet" href="css/matrix-media.css" />
  <link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'></head>
<body>

  <!--Header-part-->
  <div id="header">
    <h1>
      <a href="dashboard.html">Matrix Admin</a>
    </h1>
  </div>
  <!--close-Header-part-->

  <!--top-Header-menu-->
  <div id="user-nav" class="navbar navbar-inverse">
    <ul class="nav">
      <li  class="dropdown" id="profile-messages" >
        <a title="" href="#" data-toggle="dropdown" data-target="#profile-messages" class="dropdown-toggle"> <i class="icon icon-user"></i>
          <span class="text">此生不换</span> <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="#"> <i class="icon-user"></i>
              个人资料
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">
              <i class="icon-check"></i>
              My Tasks
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a href="login.html">
              <i class="icon-key"></i>
              退出
            </a>
          </li>
        </ul>
      </li>
      <li class="dropdown" id="menu-messages">
        <a href="#" data-toggle="dropdown" data-target="#menu-messages" class="dropdown-toggle">
          <i class="icon icon-envelope"></i>
          <span class="text">Messages</span>
          <!-- <span class="label label-important">5</span> <b class="caret"></b> -->
        </a>
        <ul class="dropdown-menu">
          <li>
            <a class="sAdd" title="" href="#">
              <i class="icon-plus"></i>
              new message
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a class="sInbox" title="" href="#">
              <i class="icon-envelope"></i>
              inbox
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a class="sOutbox" title="" href="#">
              <i class="icon-arrow-up"></i>
              outbox
            </a>
          </li>
          <li class="divider"></li>
          <li>
            <a class="sTrash" title="" href="#">
              <i class="icon-trash"></i>
              trash
            </a>
          </li>
        </ul>
      </li>
      <li class="">
        <a title="" href="#">
          <i class="icon icon-cog"></i>
          <span class="text">系统设置</span>
        </a>
      </li>
      <li class="">
        <a title="" href="login.html">
          <i class="icon icon-share-alt"></i>
          <span class="text">退出</span>
        </a>
      </li>
    </ul>
  </div>
  <!--close-top-Header-menu-->
  <!--start-top-serch-->
  <div id="search">
    <input type="text" placeholder="搜索..."/>
    <button type="submit" class="tip-bottom" title="Search">
      <i class="icon-search icon-white"></i>
    </button>
  </div>
  <!--close-top-serch-->
  <!--sidebar-menu-->
  <div id="sidebar">
    <a href="#" class="visible-phone">
      <i class="icon icon-home"></i>
      Dashboard
    </a>
    <ul>
      <li>
        <a href="index.html">
          <i class="icon icon-home"></i>
          <span>综合信息</span>
        </a>
      </li>
      <li>
        <a href="charts.html">
          <i class="icon icon-signal"></i>
          <span>统计&图表</span>
        </a>
      </li>
      <li>
        <a href="widgets.html">
          <i class="icon icon-inbox"></i>
          <span>挂件</span>
        </a>
      </li>
      <li>
        <a href='add.html'>
          <i class='icon icon-tag'></i>
          <span>添加</span>
        </a>
      </li>
      <li  class="active">
        <a href='list.html'>
          <i class='icon icon-tags'></i>
          <span>列表</span>
        </a>
      </li>
      <li>
        <a href="grid.html">
          <i class="icon icon-fullscreen"></i>
          <span>Full width</span>
        </a>
      </li>
    </ul>
  </div>
  <!--sidebar-menu-->
  <div id="content">
    <div id="content-header">
      <div id="breadcrumb">
        <a href="#" title="Go to Home" class="tip-bottom">
          <i class="icon-home"></i>
          首页
        </a>
        <a href="#" class="current">XX列表</a>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span12">
          <div>
            <form method=''>
              <select style='margin-bottom:0px;' class="span1">
                <option value="1">选项一</option>
                <option value="2">选项二</option>
              </select>
              <input type="text" style='margin-bottom:0px;' />
              <button class='btn'>搜索</button>
              <span style="float:right;">
              <button class='btn'>全选</button>
              <button class='btn'>删除</button>
              <a class='btn'>添加</a>
            </span>
            </form>
          </div>
          <div class="widget-box">
            <div class="widget-title">
              <span class="icon">
                
                <i class='icon-th'></i>
              </span>
              <h5>XX数据列表</h5>
            </div>
            <div class="widget-content nopadding">
              <table class="table table-bordered table-striped with-check">
                <thead>
                  <tr>
                    <th>
                      <input type="checkbox" id="title-checkbox" name="title-checkbox" />
                    </th>
                    <th>Rendering engine</th>
                    <th>Browser</th>
                    <th>Platform(s)</th>
                    <th>Engine version</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <input type="checkbox" />
                    </td>
                    <td>Trident</td>
                    <td>
                      Internet
                    Explorer 4.0
                    </td>
                    <td>Win 95+</td>
                    <td class="center">4</td>
                    <td style='text-align:center;'>
                      <a href='' class='tip' title='修改'>
                        <i class='icon-pencil'></i>
                      </a>
                      |
                      <a href='' class='tip' title='删除'>
                        <i class='icon-remove'></i>
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input type="checkbox" />
                    </td>
                    <td>Trident</td>
                    <td>
                      Internet
                    Explorer 5.0
                    </td>
                    <td>Win 95+</td>
                    <td class="center">5</td>
                    <td style='text-align:center;'>
                      <a href='' class='tip' title='修改'>
                        <i class='icon-pencil'></i>
                      </a>
                      |
                      <a href='' class='tip' title='删除'>
                        <i class='icon-remove'></i>
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input type="checkbox" />
                    </td>
                    <td>Trident</td>
                    <td>
                      Internet
                    Explorer 4.0
                    </td>
                    <td>Win 95+</td>
                    <td class="center">4</td>
                    <td style='text-align:center;'>
                      <a href='' class='tip' title='修改'>
                        <i class='icon-pencil'></i>
                      </a>
                      |
                      <a href='' class='tip' title='删除'>
                        <i class='icon-remove'></i>
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input type="checkbox" />
                    </td>
                    <td>Trident</td>
                    <td>
                      Internet
                    Explorer 5.0
                    </td>
                    <td>Win 95+</td>
                    <td class="center">5</td>
                    <td style='text-align:center;'>
                      <a href='' class='tip' title='修改'>
                        <i class='icon-pencil'></i>
                      </a>
                      |
                      <a href='' class='tip' title='删除'>
                        <i class='icon-remove'></i>
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input type="checkbox" />
                    </td>
                    <td>Trident</td>
                    <td>
                      Internet
                    Explorer 5.5
                    </td>
                    <td>Win 95+</td>
                    <td class="center">5.5</td>
                    <td style='text-align:center;'>
                      <a href='' class='tip' title='修改'>
                        <i class='icon-pencil'></i>
                      </a>
                      |
                      <a href='' class='tip' title='删除'>
                        <i class='icon-remove'></i>
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input type="checkbox" />
                    </td>
                    <td>Trident</td>
                    <td>
                      Internet
                    Explorer 6
                    </td>
                    <td>Win 98+</td>
                    <td class="center">6</td>
                    <td style='text-align:center;'>
                      <a href='' class='tip' title='修改'>
                        <i class='icon-pencil'></i>
                      </a>
                      |
                      <a href='' class='tip' title='删除'>
                        <i class='icon-remove'></i>
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>

            </div>

          </div>
          <div class="pagination">
              <ul>
                <li><a href="#">Prev</a></li>
                <li class="active"> <a href="#">1</a> </li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">Next</a></li>
              </ul>
         </div>
        </div>
      </div>
    </div>
  </div>
  <!--Footer-part-->
  <div class="row-fluid">
    <div id="footer" class="span12">
      2013 &copy; Matrix Admin. Brought to you by
      <a href="http://themedesigner.in/">Themedesigner.in</a>
    </div>
  </div>
  <!--end-Footer-part-->
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.ui.custom.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.uniform.js"></script>
  <script src="js/select2.min.js"></script>
  <script src="js/jquery.dataTables.min.js"></script>
  <script src="js/matrix.js"></script>
  <script>

  $(document).ready(function(){
    
    $('.data-table').dataTable({
      "bJQueryUI": true,
      "sPaginationType": "full_numbers",
      "sDom": '<""l>t<"F"fp>'
    });
    
    $('input[type=checkbox],input[type=radio],input[type=file]').uniform();
    
    //$('select').select2();
    
    $("span.icon input:checkbox, th input:checkbox").click(function() {
      var checkedStatus = this.checked;
      var checkbox = $(this).parents('.widget-box').find('tr td:first-child input:checkbox');   
      checkbox.each(function() {
        this.checked = checkedStatus;
        if (checkedStatus == this.checked) {
          $(this).closest('.checker > span').removeClass('checked');
        }
        if (this.checked) {
          $(this).closest('.checker > span').addClass('checked');
        }
      });
    }); 
  });

  </script>
</body>
</html>